<template>
  <div class="edit" :model="formLabelAlign">
    <div class="text">
      <span @click="add(item)">添加栏目</span>
      <span class="icon" @click="$router.go(-1)">
        <el-icon>
          <Close />
        </el-icon>
      </span>
    </div>
    <div class="name">
      栏目名称：
      <input type="text" v-model="formLabelAlign.title" />
    </div>
    <div class="shunxu">
      顺序：
      <input type="text" v-model="formLabelAlign.id" />
    </div>
    <div class="miaoshu">
      描述：
      <input type="text" placeholder="请添加栏目描述，30字以内" v-model="formLabelAlign.string" />
    </div>
    <div class="button">
      <el-button @click="$router.go(-1)">取消</el-button>
      <el-button type="primary" @click="submit(formLabelAlign)">确定</el-button>
    </div>
  </div>
</template>

<script setup>
import { Close } from "@element-plus/icons-vue";

import { lanmu_list, lanmu_listedit } from "@/axios/api.js";

import { useRouter, useRoute } from "vue-router";
import { reactive, ref, onMounted } from "vue";

// 实例化路由对象(包含当前路由的详细信息)
var $route = useRoute();

var formLabelAlign = ref({});

onMounted(() => {
  formLabelAlign.value = JSON.parse($route.query.id);
});

var router = useRouter();

//栏目列表编辑发请求
var submit = row => {
  lanmu_listedit({ editlist: formLabelAlign.value })
    .then(res => {
      // console.log(res.data);
      localStorage.setItem("lanmu_list", JSON.stringify(res.data));
      formLabelAlign.value.list = res.data.list;
      console.log(formLabelAlign.value);
    })
    .catch(e => {});
  router.push("/maxindex/LanMu");
};

var add = row => {};
</script>

<style lang="scss" scoped>
.edit {
  width: 500px;
  // background-color: #999;
  margin: auto;
  margin-top: 20px;

  border: 1px solid #ddd;
  .text {
    font-size: 20px;
    padding: 15px;
    border-bottom: 1px solid #eee;
    .icon {
      margin-left: 360px;
    }
  }
  .name,
  .shunxu,
  .miaoshu {
    width: 100;
    font-size: 16px;
    padding: 15px;
    input {
      width: 200px;
      height: 25px;
      outline: none;
    }
  }
  .miaoshu {
    input {
      height: 100px;
    }
  }
  .shunxu,
  .miaoshu {
    margin-left: 30px;
  }
  .button {
    margin-left: 350px;
  }
}
</style>